<!DOCTYPE html>
<html lang="zh" class="js csstransforms3d">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Hugo 0.93.0" />
    <meta name="description" content="Documentation for Hugo Learn Theme">
<meta name="author" content="Mathieu Cornic">

    <link rel="icon" href="/images/favicon.png" type="image/png">

    <title>vue组件传值总结 :: welcome to my blog</title>

    
    <link href="/css/nucleus.css?1648731304" rel="stylesheet">
    <link href="/css/fontawesome-all.min.css?1648731304" rel="stylesheet">
    <link href="/css/hybrid.css?1648731304" rel="stylesheet">
    <link href="/css/featherlight.min.css?1648731304" rel="stylesheet">
    <link href="/css/perfect-scrollbar.min.css?1648731304" rel="stylesheet">
    <link href="/css/auto-complete.css?1648731304" rel="stylesheet">
    <link href="/css/atom-one-dark-reasonable.css?1648731304" rel="stylesheet">
    <link href="/css/theme.css?1648731304" rel="stylesheet">
    <link href="/css/tabs.css?1648731304" rel="stylesheet">
    <link href="/css/hugo-theme.css?1648731304" rel="stylesheet">
    
    <link href="/css/theme-green.css?1648731304" rel="stylesheet">
    
    

    <script src="/js/jquery-3.3.1.min.js?1648731304"></script>

    <style>
      :root #header + #content > #left > #rlblock_left{
          display:none !important;
      }
      
    </style>
    
  </head>
  <body class="" data-url="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/">
    <nav id="sidebar" class="showVisitedLinks">



  <div id="header-wrapper">
    <div id="header">
      <a id="logo" href='/'>

<svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100%" height="100%"  viewBox="0 0 285.1 69.9" xml:space="preserve">
<g>
	<path d="M35,0c9.6,0,17.9,3.4,24.7,10.3c6.8,6.8,10.3,15,10.3,24.7c0,9.7-3.4,17.9-10.3,24.7c-6.8,6.8-15,10.3-24.7,10.3
		c-9.7,0-17.9-3.4-24.7-10.3C3.4,52.8,0,44.6,0,34.9c0-9.6,3.4-17.9,10.3-24.7C17.1,3.4,25.3,0,35,0z M22.3,63.7
		c0.3-7.4,0.3-14.7,0-22.1c-2.1-0.4-4-0.4-5.9,0c-0.2,0.8-0.2,2.5-0.1,4.9c0.1,2.3,0,3.9-0.3,4.8c-1.7-0.6-2.7-2.1-3.1-4.6
		c-0.1-0.7-0.1-3.3-0.1-8c0-14.5-0.1-23-0.3-25.6c-3.6,4.1-5.6,7-5.9,8.5v10.9c0,4.5,0.1,8.1,0.2,10.9c0,0.4,0,1.3-0.1,2.8
		c-0.1,1.2,0,2.1,0.1,2.6c0.1,0.6,1.1,2.1,2.8,4.7C13.2,58.7,17.5,62.2,22.3,63.7z M44.6,65.4c0.3-5,0.2-12.9-0.1-23.6
		c-2.1-0.3-4.1-0.3-5.9,0c-0.2,2-0.2,5.1-0.1,9.5c0.1,4.3,0,7.5-0.1,9.5c-2.9,0.4-5,0.3-6.2-0.1c-0.2-5.6-0.2-15.2-0.1-28.7
		c0.1-12.4,0-21.8-0.3-28.3c-2.4,0.1-4.3,0.6-5.7,1.3c-0.1,7.7-0.2,17.7-0.1,30.1c0,16.5,0,26.6,0,30.3c2.3,1.1,5.4,1.7,9.4,1.7
		C38.9,66.9,42.1,66.4,44.6,65.4z M48.1,64.1c9.7-4.6,15.7-12,18-22.2c-1.8-0.2-3.8-0.3-6.1-0.3c-1.6,3.9-2.6,6.3-3.2,7.2
		c-1.1,1.7-2,2.5-2.7,2.5C54,46,54,39.1,54,30.5c0-11.5,0-18.4,0-20.9c-1.4-1.4-3.3-2.5-5.7-3.4C48.1,6.3,48,6.4,48,6.7
		c0,3.5,0,13.1,0,28.8C47.9,47.2,48,56.8,48.1,64.1z"/>
</g>
<g>
	<path d="M116.6,51.3h-29c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.6-0.7-1c-0.2-0.4-0.2-0.8-0.2-1.3V16.3h6.3
		V45h25.8V51.3z"/>
	<path d="M154.8,51.3h-22.9c-0.9,0-1.8-0.2-2.9-0.5c-1-0.3-2-0.8-2.9-1.5c-0.9-0.7-1.6-1.6-2.2-2.8c-0.6-1.1-0.9-2.5-0.9-4.2V19.5
		c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2h28.6v6.3h-25.4v19.8
		c0,0.8,0.2,1.5,0.7,1.9s1.1,0.7,1.9,0.7h22.9V51.3z M151.9,37h-20v-6.4h20V37z"/>
	<path d="M197.3,51.3H191v-8.6h-22.3v8.6h-6.3V33.8c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.7-5.5c1.6-1.5,3.4-2.8,5.5-3.6
		c2.1-0.9,4.5-1.3,7-1.3h14.3c0.4,0,0.9,0.1,1.2,0.2c0.4,0.2,0.7,0.4,1,0.7s0.5,0.6,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2V51.3z
		 M168.7,36.4H191V22.6h-11.2c-0.2,0-0.6,0-1.2,0.1c-0.6,0.1-1.4,0.2-2.2,0.4c-0.8,0.2-1.7,0.6-2.6,1c-0.9,0.5-1.8,1.1-2.5,2
		c-0.8,0.8-1.4,1.9-1.9,3.1c-0.5,1.2-0.7,2.8-0.7,4.5V36.4z"/>
	<path d="M241.7,28.1c0,1.4-0.2,2.7-0.5,3.9c-0.4,1.1-0.8,2.1-1.5,3c-0.6,0.9-1.3,1.6-2.1,2.2c-0.8,0.6-1.6,1.1-2.5,1.5
		c-0.9,0.4-1.8,0.7-2.6,0.9c-0.9,0.2-1.7,0.3-2.5,0.3l13.3,11.5h-9.8l-13.2-11.5h-4.6v-6.3H230c0.8-0.1,1.5-0.2,2.2-0.5
		c0.7-0.3,1.2-0.6,1.7-1.1c0.5-0.5,0.9-1,1.1-1.6c0.3-0.6,0.4-1.4,0.4-2.2v-4c0-0.4,0-0.6-0.1-0.8c-0.1-0.2-0.2-0.3-0.3-0.4
		c-0.1-0.1-0.3-0.1-0.4-0.2c-0.2,0-0.3,0-0.4,0h-20.9v28.7h-6.3V19.5c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1
		c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2H234c1.4,0,2.6,0.3,3.6,0.8s1.8,1.2,2.4,1.9c0.6,0.8,1,1.6,1.3,2.5
		c0.3,0.9,0.4,1.7,0.4,2.5V28.1z"/>
	<path d="M285.1,48.6c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.7-0.7,1c-0.3,0.3-0.6,0.5-1,0.7c-0.4,0.2-0.8,0.2-1.2,0.2
		c-0.4,0-0.8-0.1-1.2-0.2c-0.4-0.1-0.8-0.4-1.1-0.7l-23.2-24.2v24.7h-6.3V19c0-0.7,0.2-1.2,0.5-1.8c0.4-0.5,0.8-0.9,1.4-1.2
		c0.6-0.2,1.2-0.3,1.9-0.2s1.2,0.4,1.6,0.9l23.2,24.2V16.3h6.3V48.6z"/>
</g>
</svg>

</a>

    </div>
    
        <div class="searchbox">
    <label for="search-by"><i class="fas fa-search"></i></label>
    <input data-search-input id="search-by" type="search" placeholder="">
    <span data-search-clear=""><i class="fas fa-times"></i></span>
</div>

<script type="text/javascript" src="/js/lunr.min.js?1648731304"></script>
<script type="text/javascript" src="/js/auto-complete.js?1648731304"></script>
<script type="text/javascript">
    
        var baseurl = "\/";
    
</script>
<script type="text/javascript" src="/js/search.js?1648731304"></script>

    
  </div>
  

    <div class="highlightable">
    <ul class="topics">

        
          
          




 
  
    
    <li data-nav-id="/javascript/" title="— JavaScript" class="dd-item
        
        
        
        ">
      <a href="/javascript/">
          <b>1. </b>— JavaScript
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/" title="JS定时器应用" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/">
          JS定时器应用
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/ajax/" title="Ajax简单介绍" class="dd-item
        
        
        
        ">
      <a href="/javascript/ajax/">
          Ajax简单介绍
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/" title="JS对象拷贝" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/">
          JS对象拷贝
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/" title="JS中的内存机制" class="dd-item
        
        
        
        ">
      <a href="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/">
          JS中的内存机制
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" title="JS遍历方法总结" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/">
          JS遍历方法总结
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/node.js/" title="— Node.js" class="dd-item
        
        
        
        ">
      <a href="/node.js/">
          <b>2. </b>— Node.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/node.js/koa%E5%9F%BA%E7%A1%80/" title="Koa创建本地服务器" class="dd-item ">
        <a href="/node.js/koa%E5%9F%BA%E7%A1%80/">
        Koa创建本地服务器
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/" title="Nunjucks模板引擎常用基础" class="dd-item ">
        <a href="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/">
        Nunjucks模板引擎常用基础
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/nodemailer/" title="Nodemailer实现邮箱注册" class="dd-item
        
        
        
        ">
      <a href="/node.js/nodemailer/">
          Nodemailer实现邮箱注册
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/" title="Node博客系统开发记录" class="dd-item
        
        
        
        ">
      <a href="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/">
          Node博客系统开发记录
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node-%E7%88%AC%E8%99%AB/" title="Node爬虫思路整理" class="dd-item
        
        
        
        ">
      <a href="/node.js/node-%E7%88%AC%E8%99%AB/">
          Node爬虫思路整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/cookiesession%E5%BA%94%E7%94%A8/" title="cookie,session实现登录验证" class="dd-item
        
        
        
        ">
      <a href="/node.js/cookiesession%E5%BA%94%E7%94%A8/">
          cookie,session实现登录验证
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/token%E5%AE%9E%E4%BE%8B/" title="Egg.js: token应用实例" class="dd-item
        
        
        
        ">
      <a href="/node.js/token%E5%AE%9E%E4%BE%8B/">
          Egg.js: token应用实例
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/cookie-%E5%92%8C-session/" title="koa应用cookie,session实例" class="dd-item ">
        <a href="/node.js/cookie-%E5%92%8C-session/">
        koa应用cookie,session实例
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/vue/" title="— Vue.js" class="dd-item
        parent
        
        
        ">
      <a href="/vue/">
          <b>3. </b>— Vue.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/vue/vue2.0%E8%B5%B7%E6%AD%A5/" title="vue基础入门" class="dd-item ">
        <a href="/vue/vue2.0%E8%B5%B7%E6%AD%A5/">
        vue基础入门
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结" class="dd-item active">
        <a href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/">
        vue组件传值总结
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/vue/vuerouter/" title="VueRouter常用点整理" class="dd-item
        
        
        
        ">
      <a href="/vue/vuerouter/">
          VueRouter常用点整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/web/" title="— Web About" class="dd-item
        
        
        
        ">
      <a href="/web/">
          <b>4. </b>— Web About
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/web/indexeddb/" title="IndexedDB数据库常用函数封装" class="dd-item
        
        
        
        ">
      <a href="/web/indexeddb/">
          IndexedDB数据库常用函数封装
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/web/url%E5%A4%84%E7%90%86/" title="URL手动处理" class="dd-item
        
        
        
        ">
      <a href="/web/url%E5%A4%84%E7%90%86/">
          URL手动处理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/myimg/" title="— 杂 感 . . ." class="dd-item
        
        
        
        ">
      <a href="/myimg/">
          <b>5. </b>— 杂 感 . . .
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/myimg/myimage/" title="Myimages" class="dd-item
        
        
        
        ">
      <a href="/myimg/myimage/">
          Myimages
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
        
    </ul>

    
    
      <section id="shortcuts">
        <h3></h3>
        <ul>
          
              <li>
                  <a class="padding" href="https://gitee.com/wen-yun-li"><i class='fab fa-fw fa-github'></i> — Gitee</a>
              </li>
          
              <li>
                  <a class="padding" href="https://github.com/liwenyun"><i class='fab fa-fw fa-github'></i> — GitHub</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.runoob.com/"><i class='fas fa-fw fa-bookmark'></i>— 菜鸟教程</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.eggjs.org/zh-CN/intro/quickstart"><i class='fas fa-fw fa-bookmark'></i>— Egg.js 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.axios-http.cn/docs/intro"><i class='fas fa-fw fa-bookmark'></i>— Axios 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://v3.cn.vuejs.org/guide/introduction.html"><i class='fas fa-fw fa-bookmark'></i>— Vue.js 文档</a>
              </li>
          
        </ul>
      </section>
    

    
    <section id="prefooter">
      <hr/>
      <ul>
      

      
        <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> </a></li>
      
      </ul>
    </section>
    
    <section id="footer">
      <center>
    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download matcornic/hugo-theme-learn on GitHub">Download</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn" data-icon="octicon-star" data-show-count="true" aria-label="Star matcornic/hugo-theme-learn on GitHub">Star</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matcornic/hugo-theme-learn on GitHub">Fork</a>

    <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fas fa-heart"></i></a> from <a href="https://getgrav.org">Grav</a> and <a href="https://gohugo.io/">Hugo</a></p>
</center>

<script async defer src="https://buttons.github.io/buttons.js"></script>

    </section>
  </div>
</nav>




        <section id="body">
        <div id="overlay"></div>
        <div class="padding highlightable">
              
              <div>
                <div id="top-bar">
                
                  
                  
                  
                  <div id="top-github-link">
                    <a class="github-link" title='' href="https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/vue/vue%20%e7%bb%84%e4%bb%b6%e4%bc%a0%e5%80%bc/index.md" target="blank">
                      <i class="fas fa-code-branch"></i>
                      <span id="top-github-link-text"></span>
                    </a>
                  </div>
                  
                
                
                <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <span id="sidebar-toggle-span">
                        <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                          <i class="fas fa-bars"></i>
                        </a>
                    </span>
                  
                  <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
                  
                  <span class="links">
                 
                 
                    
          
          
            
            
          
          
            
            
          
          
            <a href='/'>LIWENYUN BLOG</a> > <a href='/vue/'>— Vue.js</a> > vue组件传值总结
          
        
          
        
          
        
                 
                  </span>
                </div>
                
                    <div class="progress">
    <div class="wrapper">
<nav id="TableOfContents">
  <ul>
    <li><a href="#一父组件向子组件传值">一、父组件向子组件传值</a></li>
    <li><a href="#二子组件向父组件传值">二、子组件向父组件传值</a>
      <ul>
        <li><a href="#1子组件绑定一个事件通过-thisemit-来触发">1.子组件绑定一个事件，通过 this.$emit() 来触发</a></li>
        <li><a href="#2通过-callback-函数">2.通过 callback 函数</a></li>
        <li><a href="#3通过-parent--children-或-refs-访问组件实例">3.通过 $parent / $children 或 $refs 访问组件实例</a></li>
        <li><a href="#4attrs--listeners">4.$attrs / $listeners</a></li>
      </ul>
    </li>
    <li><a href="#三兄弟组件之间传值">三、兄弟组件之间传值</a>
      <ul>
        <li><a href="#1还是通过-emit-和-props-结合的方式">1.还是通过 $emit 和 props 结合的方式</a></li>
        <li><a href="#2通过一个-空-vue-实例">2.通过一个 空 vue 实例</a></li>
        <li><a href="#3使用-vuex略">3.使用 vuex（略）</a></li>
      </ul>
    </li>
    <li><a href="#四多层父子组件通信">四、多层父子组件通信</a></li>
    <li><a href="#总结">总结</a></li>
  </ul>
</nav>
    </div>
</div>

                
              </div>
            </div>
            
        <div id="head-tags">
        
        </div>
        
        <div id="body-inner">
          
            <h1>
              
              vue组件传值总结
            </h1>
          

        


<p>Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。</p>
<p>但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。以下内容介绍针对不同的关系，怎么实现数据传递。</p>
<h2 id="一父组件向子组件传值">一、父组件向子组件传值</h2>
<p>即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。</p>
<ul>
<li>在父组件的子组件标签中绑定自定义属性</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 父组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">user</span><span style="color:#f92672">-</span><span style="color:#a6e22e">detail</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">myName</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;name&#34;</span> <span style="color:#f92672">/&gt;</span>
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">UserDetail</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    ......
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><ul>
<li>在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 子组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;myName&#39;</span>]
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">/*
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">props: { myName: String } //这样指定传入的类型，如果类型不对会警告
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">props: { myName: [String, Number] } // 多个可能的类型
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">prosp: { myName: { type: String, requires: true } } //必填的的字符串
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">props: { 
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">    childMsg: { 
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">        type: Array, 
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">        default: () =&gt; [] 
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">    }
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">}  // default指定默认值
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">如果 props 验证失败，会在控制台发出一个警告。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">*/</span>
</span></span></code></pre></div><p>子组件接受的父组件的值分为引用类型和普通类型两种：</p>
<ul>
<li>
<p>普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）</p>
</li>
<li>
<p>引用类型：数组（Array）、对象（Object）</p>
</li>
</ul>
<p>基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。</p>
<ul>
<li>如果传过来的值是简单数据类型，是可以在子组件中修改，也不会影响其他兄弟组件内同样调用了来自该父组件的值。</li>
</ul>
<p>具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 子组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;myName&#39;</span>],
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>() {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">name</span> <span style="color:#f92672">:</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">myName</span>    <span style="color:#75715e">// 把传过来的值赋值给新的变量
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">watch</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">myName</span>(<span style="color:#a6e22e">newVal</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">newVal</span> <span style="color:#75715e">//对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">changeName</span>() {  
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;Lily&#39;</span>  <span style="color:#75715e">// 这里修改的只是自己内部的值，就不会报错了
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        },
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>注：如果不使用 watch 来监听父组件传递的 myName 值，子组件中的 name 值是不会随着父组件的 myName 值进行改变，因为 data 中 name: this.myName 仅仅只是定义了一个初始值。</p>
<ul>
<li>如果引用类型的值，当在子组件中修改后，父组件的也会修改，因其数据是公用的，其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值，就相当于复制了一个副本，这个副本的指针还是指向父组件中的那个，即共享同一个引用。所以除非有特殊需要，否则不要轻易修改。</li>
</ul>
<h2 id="二子组件向父组件传值">二、子组件向父组件传值</h2>
<h3 id="1子组件绑定一个事件通过-thisemit-来触发">1.子组件绑定一个事件，通过 this.$emit() 来触发</h3>
<p>在子组件中绑定一个事件，并给这个事件定义一个函数</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 子组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;changeParentName&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">改变父组件的name</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">//子组件的事件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#a6e22e">changeParentName</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">function</span>() {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$emit</span>(<span style="color:#e6db74">&#39;handleChange&#39;</span>, <span style="color:#e6db74">&#39;Jack&#39;</span>) <span style="color:#75715e">// 触发父组件中handleChange事件并传参Jack
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>            <span style="color:#75715e">// 注：此处事件名称与父组件中绑定的事件名称要一致
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>在父组件中定义并绑定 handleChange 事件</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 父组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">child</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">handleChange</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;changeName&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/child&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">changeName</span>(<span style="color:#a6e22e">name</span>) {  <span style="color:#75715e">// name形参是子组件中传入的值Jack
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">name</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="2通过-callback-函数">2.通过 callback 函数</h3>
<p>先在父组件中定义一个callback函数，并把 callback 函数传过去</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 父组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">child</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">callback</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;callback&#34;</span><span style="color:#f92672">&gt;&lt;</span><span style="color:#960050;background-color:#1e0010">/child&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">name</span>) {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">name</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>在子组件中接收，并执行 callback 函数</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 子组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;callback(&#39;Jack&#39;)&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">改变父组件的name</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">callback</span><span style="color:#f92672">:</span> Function,
</span></span></code></pre></div><h3 id="3通过-parent--children-或-refs-访问组件实例">3.通过 $parent / $children 或 $refs 访问组件实例</h3>
<p>这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 子组件  
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {  
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span> () {  
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {  
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">title</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;子组件&#39;</span>  
</span></span><span style="display:flex;"><span>        }  
</span></span><span style="display:flex;"><span>    },  
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {  
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">sayHello</span> () {  
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;Hello&#39;</span>);  
</span></span><span style="display:flex;"><span>        }  
</span></span><span style="display:flex;"><span>    }  
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 父组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">child</span> <span style="color:#a6e22e">ref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;childRef&#34;</span> <span style="color:#f92672">/&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">created</span> () {
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// 通过 $ref 来访问子组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">childRef</span>.<span style="color:#a6e22e">title</span>);  <span style="color:#75715e">// 子组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">childRef</span>.<span style="color:#a6e22e">sayHello</span>(); <span style="color:#75715e">// Hello
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">// 通过 $children 来调用子组件的方法
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$children</span>.<span style="color:#a6e22e">sayHello</span>(); <span style="color:#75715e">// Hello 
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>注：这种方式的组件通信不能跨级。</p>
<h3 id="4attrs--listeners">4.$attrs / $listeners</h3>
<p>链接：<a href="https://segmentfault.com/a/1190000022708579">4.$attrs / $listeners 详解</a></p>
<h2 id="三兄弟组件之间传值">三、兄弟组件之间传值</h2>
<h3 id="1还是通过-emit-和-props-结合的方式">1.还是通过 $emit 和 props 结合的方式</h3>
<p>在父组件中给要传值的两个兄弟组件都绑定要传的变量，并定义事件</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 父组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">child</span><span style="color:#f92672">-</span><span style="color:#a6e22e">a</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">myName</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;name&#34;</span> <span style="color:#f92672">/&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">child</span><span style="color:#f92672">-</span><span style="color:#a6e22e">b</span> <span style="color:#f92672">:</span><span style="color:#a6e22e">myName</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;name&#34;</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">changeName</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;editName&#34;</span> <span style="color:#f92672">/&gt;</span>  
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>() {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;John&#39;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#39;child-a&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">ChildA</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#39;child-b&#39;</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">ChildB</span>,
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">editName</span>(<span style="color:#a6e22e">name</span>) {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">name</span>
</span></span><span style="display:flex;"><span>        },
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>在子组件B中接收变量和绑定触发事件</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// child-b 组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">姓名</span><span style="color:#960050;background-color:#1e0010">：</span>{{ <span style="color:#a6e22e">myName</span> }}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;changeName&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">修改姓名</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;myName&#34;</span>],
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">changeName</span>() {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$emit</span>(<span style="color:#e6db74">&#39;changeName&#39;</span>, <span style="color:#e6db74">&#39;Lily&#39;</span>)   <span style="color:#75715e">// 触发事件并传值
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// child-a 组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">姓名</span><span style="color:#960050;background-color:#1e0010">：</span>{{ <span style="color:#a6e22e">newName</span> }}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;myName&#34;</span>],
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">computed</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">newName</span>() {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">if</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">myName</span>) { <span style="color:#75715e">// 判断是否有值传过来
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>                <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">myName</span>
</span></span><span style="display:flex;"><span>            }
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">return</span> <span style="color:#e6db74">&#39;John&#39;</span> <span style="color:#75715e">//没有传值的默认值
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>即：当子组件B 通过 $emit() 触发了父组件的事件函数 editName，改变了父组件的变量name 值，父组件又可以把改变了的值通过 props 传递给子组件A，从而实现兄弟组件间数据传递。</p>
<h3 id="2通过一个-空-vue-实例">2.通过一个 空 vue 实例</h3>
<p>创建一个 EventBus.js 文件，暴露一个 vue 实例</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Vue</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;Vue&#39;</span>  
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Vue</span>()
</span></span></code></pre></div><p>在要传值的文件里导入这个空 vue 实例，绑定事件并通过 $emit 触发事件函数</p>
<p>(也可以在 main.js 中全局引入该 js 文件，我一般在需要使用到的组件中引入)</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">p</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">姓名</span><span style="color:#f92672">:</span> {{ <span style="color:#a6e22e">name</span> }}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/p&gt;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;changeName&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">修改姓名</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">EventBus</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;../EventBus.js&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">data</span>() {
</span></span><span style="display:flex;"><span>     <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>         <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;John&#39;</span>,
</span></span><span style="display:flex;"><span>     }
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">changeName</span>() {
</span></span><span style="display:flex;"><span>          <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;Lily&#39;</span>
</span></span><span style="display:flex;"><span>          <span style="color:#a6e22e">EventBus</span>.<span style="color:#a6e22e">$emit</span>(<span style="color:#e6db74">&#34;editName&#34;</span>, <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span>) <span style="color:#75715e">// 触发全局事件,并且把改变后的值传入事件函数
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>在接收传值的组件中也导入 vue 实例，通过 $on 监听回调，回调函数接收所有触发事件时传入的参数</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">EventBus</span> } <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;../EventBus.js&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">​</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>() {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&#39;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">created</span>() {
</span></span><span style="display:flex;"><span>         <span style="color:#a6e22e">EventBus</span>.<span style="color:#a6e22e">$on</span>(<span style="color:#e6db74">&#39;editName&#39;</span>, (<span style="color:#a6e22e">name</span>) =&gt; {
</span></span><span style="display:flex;"><span>             <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">name</span>
</span></span><span style="display:flex;"><span>         })
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。</p>
<h3 id="3使用-vuex略">3.使用 vuex（略）</h3>
<p><a href="https://vuex.vuejs.org/zh/index.html">Vuex文档链接</a></p>
<h2 id="四多层父子组件通信">四、多层父子组件通信</h2>
<p>有时需要实现通信的两个组件不是直接的父子组件，而是祖父和孙子，或者是跨越了更多层级的父子组件，这种时候就不可能由子组件一级一级的向上传递参数，特别是在组件层级比较深，嵌套比较多的情况下，需要传递的事件和属性较多，会导致代码很混乱。</p>
<p>这时就需要用到 vue 提供的更高阶的方法：provide/inject。</p>
<p>这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。</p>
<p>链接：<a href="https://cn.vuejs.org/v2/api/#provide-inject">官方文档</a></p>
<p>provide/inject：简单来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量，不管组件层级有多深，在父组件生效的生命周期内，这个变量就一直有效。</p>
<p>父组件：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">provide</span><span style="color:#f92672">:</span> { <span style="color:#75715e">// 它的作用就是将 **name** 这个变量提供给它的所有子组件。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Jack&#39;</span>
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>子组件：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">inject</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#39;name&#39;</span>], <span style="color:#75715e">// 注入了从父组件中提供的name变量
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#a6e22e">mounted</span> () {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span>);  <span style="color:#75715e">// Jack
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>注：provide 和 inject 绑定并不是可响应的。即父组件的name变化后，子组件不会跟着变。</p>
<p><strong>如果想要实现 provide 和 inject 数据响应，有两种方法：</strong></p>
<p>1.provide 祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在后代组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props，methods.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 父组件　
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">button</span> <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;changeName&#34;</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">修改姓名</span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/button&gt;</span>
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">child</span><span style="color:#f92672">-</span><span style="color:#a6e22e">b</span> <span style="color:#f92672">/&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>    ......
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">data</span>() {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Jack&#34;</span>
</span></span><span style="display:flex;"><span>        };
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">provide</span>() {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">parentObj</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">this</span> <span style="color:#75715e">//提供祖先组件的实例
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        };
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">changeName</span>() {
</span></span><span style="display:flex;"><span>            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;Lily&#39;</span>
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>后代组件中取值：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">template</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>　　<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">div</span> <span style="color:#66d9ef">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;border2&#34;</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>　　　　<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">P</span><span style="color:#f92672">&gt;</span><span style="color:#a6e22e">姓名</span><span style="color:#960050;background-color:#1e0010">：</span>{{<span style="color:#a6e22e">parentObj</span>.<span style="color:#a6e22e">name</span>}}<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/P&gt;</span>
</span></span><span style="display:flex;"><span>　　<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/template&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span>　　<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>　　　　<span style="color:#a6e22e">inject</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>　　　　　　<span style="color:#a6e22e">parentObj</span><span style="color:#f92672">:</span> {
</span></span><span style="display:flex;"><span>　　　　　　　　<span style="color:#66d9ef">default</span><span style="color:#f92672">:</span> () =&gt; ({})
</span></span><span style="display:flex;"><span>　　　　　　}
</span></span><span style="display:flex;"><span>　　　　} <span style="color:#75715e">// 或者inject: [&#39;parentObj&#39;]
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>　　};
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>注：这种方式在函数式组件中用的比较多。函数式组件，即无状态(没有响应式数据)，无实例化(没有 this 上下文)，内部也没有任何生命周期处理方法，所以渲染性能高，比较适合依赖外部数据传递而变化的组件。</p>
<p>2.使用 Vue.observable 优化响应式 provide.</p>
<p>链接：<a href="https://cn.vuejs.org/v2/api/#Vue-observable">官方文档</a></p>
<h2 id="总结">总结</h2>

<div class="notices note" ><p>父子通信： 父向子传递数据是通过 props，子向父是通过 $emit；通过 $parent / $children 通信；$ref 也可以访问组件实例；provide / inject ；$attrs / $listeners；</p>
<p>兄弟通信： Bus；Vuex</p>
<p>跨级通信： Bus；Vuex；provide / inject ; $attrs / $listeners；</p>
</div>



<footer class="footline">
	
</footer>

        
        </div>
        

      </div>

    <div id="navigation">
        
        

        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
            
        

        


	 
	 
		
			<a class="nav nav-prev" href="/vue/vue2.0%E8%B5%B7%E6%AD%A5/" title="vue基础入门"> <i class="fa fa-chevron-left"></i></a>
		
		
			<a class="nav nav-next" href="/vue/vuerouter/" title="VueRouter常用点整理" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
		
	
    </div>

    </section>

    <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
      <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
    </div>
    <script src="/js/clipboard.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.jquery.min.js?1648731304"></script>
    <script src="/js/jquery.sticky.js?1648731304"></script>
    <script src="/js/featherlight.min.js?1648731304"></script>
    <script src="/js/highlight.pack.js?1648731304"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="/js/modernizr.custom-3.6.0.js?1648731304"></script>
    <script src="/js/learn.js?1648731304"></script>
    <script src="/js/hugo-learn.js?1648731304"></script>
    
        
            <script src="https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"></script>
        
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>
    
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-105947713-1', 'auto');
  ga('send', 'pageview');

</script>
  </body>
</html>

